<template>
	<view class="viewPort">
		<!-- 主视口 -->
		<!-- 机房概览 -->
		<view v-show="showTab.machineRoom" style="min-height: inherit;">
			<machineRoomTab v-if="tab.machineRoom" ref="machineRoomTab"></machineRoomTab>
		</view>
		<!-- 告警 -->
		<view v-show="showTab.alarm" style="min-height: inherit;">
			<alarmTab v-if="tab.alarm" ref="alarmTab" :scrollTop="scrollTop"></alarmTab>
		</view>
		<!-- 个人信息 -->
		<view v-show="showTab.admin" style="min-height: inherit;">
			<!-- <adminTab v-if="tab.admin" ref="adminTab"></adminTab> -->
			<homeTab v-if="tab.admin" ref="homeTab"></homeTab>
		</view>
		<view class="tabBox">
			<headBar @currentTab="currentTab" :currentPage="currentPage"></headBar>
		</view>
	</view>
</template>

<script>
	// 机房概览
	import machineRoomTab from "../machineRoom/machineRoom.vue";
	import alarmTab from "../alarm/alarm.vue";
	// import adminTab from "../admin/admin.vue";
	import homeTab from "../home/home.vue";
	import headBar from "../paltform/app-plus/subNVue/bottom-bar.nvue";
	export default{
		components:{machineRoomTab,alarmTab,homeTab,headBar},
		data(){
			return{
				currentPage:0, //当前页面
				scrollTop:0,
				showTab:{
					machineRoom:true,
					alarm:false,
					admin:false
				},
				tab:{
					machineRoom:true,
					alarm:false,
					admin:false
				}
			}

		},
		onLoad() {
			uni.hideTabBar();
		},
		onPageScroll:function(val){
			// const px = rpxToPx(1)
			this.scrollTop = val.scrollTop;
		},
		onPullDownRefresh() {
			switch (this.currentPage){
				case 0:
					this.$refs.machineRoomTab.refreshData();
					// console.log('调用machineRoomTab')
					break;
				case 1:
					this.$refs.alarmTab.refreshData();
					// console.log('调用alarmTab')
					break;
				case 2:
					this.$refs.homeTab.refreshData();
					// console.log('调用homeTab')
					break;
				default:
					break;
			}
		},
		methods:{
			currentTab(val){
				this.currentPage = val;
				switch (val){
					case 0:
						this.showTab.alarm = false;
						this.showTab.admin = false;
						this.$nextTick(()=>{
							this.showTab.machineRoom = true;
							this.tab.machineRoom = true;
						})
						break;
					case 1:
						this.showTab.machineRoom = false;
						this.showTab.admin = false;
						this.$nextTick(()=>{
							this.showTab.alarm = true;
							this.tab.alarm = true;
						})
						break;
					case 2:
						this.showTab.machineRoom = false;
						this.showTab.alarm = false;
						this.$nextTick(()=>{
							this.showTab.admin = true;
							this.tab.admin = true;
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.viewPort{
	min-height: inherit;
	position: relative;
	padding-bottom: 150rpx;
	.tabBox{
		height: 150rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}
}
</style>
